<template>
  <el-form :inline="true" :model="userformIn" class="demo-form-inline">
    <!-- 标题配置栏 -->
    <el-form-item label="真实姓名">
      <el-input
        v-model="userformIn.realName"
        placeholder="请输入用户真实姓名"
      ></el-input>
    </el-form-item>

    <el-form-item label="数据状态">
      <el-select v-model="userformIn.scValue" placeholder="请选择" clearable = true>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onsell" icon="el-icon-search"
        >查询</el-button
      >
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="cz" icon="el-icon-female"
        >重置</el-button
      >
    </el-form-item>
    <el-form-item>
      <el-button
        icon="el-icon-circle-plus-outline"
        type="primary"
        @click="jumpAddUserPage"
        >新增</el-button
      >
    </el-form-item>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="id" width="80"> </el-table-column>
      <el-table-column prop="username" label="用户姓名"> </el-table-column>
      <el-table-column prop="realName" label="真实名字"> </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>
      <el-table-column prop="departmentName" label="部门名称">
      </el-table-column>
      <el-table-column prop="gender" label="年龄"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column fixed="right" label="操作"  width="210">
        <template slot-scope="scope">
          <el-button @click="jumpUserEditPage(scope.row)" type="text"
            >编辑</el-button
          >
          <el-button @click="deleteYh(scope.row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增用户" :visible.sync="addUserIsShow">
      <el-form :model="addUserFormIn">
        <el-form-item label="用户姓名" :label-width="formLabelWidth">
          <el-input
            v-model="addUserFormIn.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择部门" :label-width="formLabelWidth">
          <el-select v-model="addUserFormIn.department" placeholder="请选择" clearable = true>
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <el-select
            v-model="addUserFormIn.roles"
            multiple
            placeholder="选择角色,支持多选"
          >
            <el-option
              v-for="item in rolesOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="真实名字" :label-width="formLabelWidth">
          <el-input
            v-model="addUserFormIn.realName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input
            v-model="addUserFormIn.nickName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input
            v-model="addUserFormIn.gender"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="addUserFormIn.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="addUserFormIn.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="addUserFormIn.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserIsShow = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑用戶" :visible.sync="editUserIsShow">
      <el-form :model="edituserform">
        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <el-select
            v-model="edituserform.roles"
            multiple
            placeholder="选择角色,支持多选"
          >
            <el-option
              v-for="item in rolesOptions1"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="真实名字" :label-width="formLabelWidth">
          <el-input
            v-model="edituserform.realName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input
            v-model="edituserform.nickName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="edituserform.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="edituserform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="edituserform.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserIsShow = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>

<script>
import {
  selectAllUsers,
  deleteYh,
  selectDepartmentsForUser,
  addUser,
  selectAllRoles,
  selectAllRolesHasAl,
  editUser,
} from "@/api/user";

export default {
  name: "",
  data() {
    return {
      tableData: [],
      userformIn: {},
      options: [
        {
          value: "1",
          label: "已删除",
        },
        {
          value: "0",
          label: "未删除",
        },
      ],
      value: "",
      addUserIsShow: false,
      addUserFormIn: {
        roles:[],
        realName:"",
        nickName:"",
        gender:"",
        phone:"",
        email:"",},
      formLabelWidth: "100px",
      departments: [],
      rolesOptions: [],
      rolesOptions1: [],
      edituserform: {
        roles:[],
        realName:"",
        nickName:"",
        gender:"",
        phone:"",
        email:"",
      },
      editUserIsShow: false,
    };
  },
  created() {
    this.selectAllUsers();
  },
  methods: {
    async addUser() {
      console.log(
        "新增用户，用户信息为this.addUserFormIn：",
        this.addUserFormIn
      );
      const dep = {
        departmentId: this.addUserFormIn.department.value,
        departmentName: this.addUserFormIn.department.label,
      };
      let params = { ...this.addUserFormIn, ...dep };
      await addUser(params);
    },
    async deleteYh(user) {
      console.log("根据用户id删除用户，删除入参信息：", user.id);
      const params = {
        id: user.id,
      };
      await deleteYh(params);
      this.selectAllUsers();
    },
    async jumpUserEditPage(row) {
      console.log("编辑跳转页面前的处理", row);
      this.edituserform.realName = row.realName;
      this.edituserform.nickName = row.nickName;
      this.edituserform.gender = row.gender;
      this.edituserform.phone = row.phone;
      this.edituserform.email = row.email;

      this.edituserform.id = row.id;
      console.log("编辑跳转页面前的处理,this.edituserform", this.edituserform);

      const res1 = await selectAllRoles();
      this.rolesOptions1 = res1.data;

      const params = {
        id: row.id,
      };
      const res2 = await selectAllRolesHasAl(params);
      this.edituserform.roles = res2.data;

      this.editUserIsShow = true;
    },

    async editUser() {
      const params = { ...this.edituserform };
      console.log("编辑用户，请求参数为:", params);
      await editUser(params);

      this.editUserIsShow = false;

      this.onsell();
    },

    async jumpAddUserPage(params) {
      const res = await selectDepartmentsForUser();
      this.departments = res.data;
      console.log("新增跳转页面前的处理res,", res.data);

      const res1 = await selectAllRoles();
      this.rolesOptions = res1.data;

      this.addUserIsShow = true;
    },
    cz() {
      this.userformIn.realName = null;
    },
    async onsell() {
      this.selectAllUsers();
    },
    async selectAllUsers() {
      const params = {
        realName: this.userformIn.realName,
        isDelete: this.userformIn.scValue,
      };
      console.log("查询用户信息，请求参数:", params);
      const res = await selectAllUsers(params);
      this.tableData = res.data;
    },
  },
};
</script>

<style lang="sess">
</style>

